<template>
  <div>
    <footer class="footer_guide">
      <router-link
        to='/msite'
        class="guide_item"
        :class="{on:'/msite'===$route.path}"
      >
        <span class="item_icon">
          <i class="icon icon-home"></i>
        </span>
        <span>首页</span>
      </router-link>
      <router-link
        to='/vip'
        class="guide_item"
        :class="{on:'/vip'===$route.path}"
      >
        <span class="item_icon">
          <i class="icon icon-shopping-cart"></i>
        </span>
        <span>VIP</span>
      </router-link>
      <router-link
        to='/doki'
        class="guide_item"
        :class="{on:'/doki'===$route.path}"
      >
        <span class="item_icon">
          <i class="icon icon-diamond"></i>
        </span>
        <span>DOKI</span>
      </router-link>
      <router-link
        to='/home'
        :class="{on:'/home'===$route.path}"
        class="guide_item"
      >
        <span class="item_icon">
          <i class="icon icon-user"></i>
        </span>
        <span>我的</span>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
  }
}
</script>

<style scoped>
.footer_guide {
  border-top: 1px solid rgb(218, 218, 218);
  position: relative;
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 50px;
  display: flex;
}
.guide_item {
  display: flex;
  flex: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin: 5px;
  color: #999;
}
.guide_item.on {
  color: rgb(243, 105, 128);
}
a {
  text-decoration: none;
}
.icon{
  font-size: 20px;
}
</style>
